/**
*2020/06/10
*auther:dazy
*边距，字体颜色，背景样式等批量生成
*/

// padding&margin
$spacing-types: (
  m: margin,
  p: padding
);
$spacing-directions: (
  t: top,
  r: right,
  b: bottom,
  l: left,
  c: center
);
$spacing-base-size: 10px;
$spacing-number: (
  0: 0,
  1: 0.5,
  2: 1,
  3: 1.5,
  4: 2,
  5: 2.5,
  6: 3,
  7: 3.5,
  50:5,
  63:6.3,
  70:7
);

@each $typeKey,
$type in $spacing-types {

  @each $directionKey,
  $direction in $spacing-directions {

    @each $sizeKey,
    $size in $spacing-number {
      .#{$typeKey}#{$directionKey}-#{$sizeKey} {
        #{$type}-#{$direction}: $size * $spacing-base-size !important;
      }

      .#{$typeKey}-#{$sizeKey} {
        #{$type}: $size * $spacing-base-size !important;
      }
    }
  }
}

// text-color,key必须用引号，防止和值名混淆
$color: (
  'red':#e71405,
  'green':#008000,
  'blue':#008afc,
  'gray':#ccc,
  'ef':#f5f5f5,
  'warning':#FFF001,
  'white':#fff,
  'gray666':#666,
  'tips':#E1E1E8,
  'table':#e4f0f8,
  'tblue':#cfecfb,
  'status-blue':#ECF8FF,
  'tips-gray-text':#6E7087,
  'detail-title':#7C858D,
  'detail-line':#E0E3EB,
  'money':#FF4200,
  'black':#000,
  'report-red':#A30014,
  'qrcode-border':#DDEEFB,
  'openChack':#4F6382,
  'report-blue': #b4e1ff,
  'purple':#9b74eb,
  'light-blue':#70afed
);


@each $colorKey,
$colorVal in $color {
  .text-#{$colorKey} {
    color: $colorVal !important;
  }
}

@each $colorKey,
$colorVal in $color {
  .bg-#{$colorKey} {
    background-color: $colorVal !important;
  }
}

@each $colorKey,
$colorVal in $color {
  .border-#{$colorKey} {
    border: 1px solid $colorVal !important;
  }
}

// 居中，居左，居右样式
@each $alignmentKey,
$alignmentVal in $spacing-directions {
  .text-#{$alignmentKey} {
    text-align: $alignmentVal !important;
  }
}

// 字体大小
$font-size: (
  10,
  12,
  14,
  16,
  18,
  20,
  22,
  24,
  25,
  26,
  28,
  30,
  32,
  34,
  36,
  38,
  40,
  42,
  44,
  46,
  56,
);

@each $sizeKey in $font-size {
  .size-#{$sizeKey} {
    font-size: $sizeKey  + px !important;
  }
}

body {
  padding: 0;
  margin: 0;
  font-size: 1.75rem;
  text-size-adjust: 100%;

  // display: block;
  overflow: hidden !important;
  overflow-y: auto;
  font-family: 'Arial, Helvetica, sans-serif,Microsoft Yahei,PingFang SC';


}

.mainbox {
  padding: 0 ;
  height: 100%;
}

#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  background-image: url("@/assets/img/bottom-bg.png");
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
}

:focus:not([data-focusvisible-polyfill]) {
  outline: none;
}

/* flex布局 */
.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-iflex {
  display: inline-flex !important;
}
.d-none{
  display: none!important;
}
.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}
.gap-1{
  gap: 10px;
}
.gap-2 {
  gap: 20px;
}
.gap-3 {
  gap: 30px;
}
.width-160 {
  width: 160px !important;
}

.width-100 {
  width: 100px !important;
}

.width-80 {
  width: 80px !important;
}

.width-70 {
  width: 70px !important;
}

.width-60 {
  width: 60px !important;
}

.width-50 {
  width: 50px !important;
}

.width-30 {
  width: 30px !important;
}

.width-24 {
  width: 24px !important;
}

.width15 {
  width: 15% !important;
}

.width20 {
  width: 20% !important;
}

.width25 {
  width: 25% !important;
}

.width30 {
  width: 30% !important;
}
.width33 {
  width: 33% !important;
}
.width35 {
  width: 35% !important;
}

.width40 {
  width: 40% !important;
}
.width45 {
  width: 45% !important;
}
.width50 {
  width: 50% !important;
}

.width60 {
  width: 60% !important;
}

.width65 {
  width: 65% !important;
}

.width70 {
  width: 70%!important;
}

.width80 {
  width: 80%!important;
}

.width90 {
  width: 90%!important;
}

.width100 {
  width: 100% !important;
}

.height20 {
  height: 20% !important;
}

.height25 {
  height: 25% !important;
}

.height30 {
  height: 30% !important;
}

.height35 {
  height: 35% !important;
}

.height40 {
  height: 40% !important;
}

.height45 {
  height: 45% !important;
}

.height50 {
  height: 50% !important;
}

.height55 {
  height: 55% !important;
}

.height60 {
  height: 60% !important;
}

.height65 {
  height: 65% !important;
}

.height70 {
  height: 70% !important;
}

.height100vh {
  height: 100vh !important;
}

.height100 {
  height: 100% !important;
}



.flex-1 {
  -webkit-flex: 1;
  /* Chrome */
  flex: 1;
  min-width: 0;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}

.align-items-between {
  -ms-align-content: space-between !important;
  align-content: space-between !important;
}

.direction-column {
  flex-direction: column;
}

.row-reverse {
  flex-direction: row-reverse;
}

.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.space-between {
  justify-content: space-between !important;
}

.space-around {
  justify-content: space-around !important;
}

.space-evenly {
  justify-content: space-evenly !important;
}

/* position */
.position-relative {
  position: relative;
  /*z-index: 2;*/
}

.position-absolute {
  position: absolute;
  /*z-index: 1;*/
}

.position-fixed {
  position: fixed;
  /*z-index: 3;*/
}

/*font-size*/

.font-bold {
  font-weight: bold !important;
}

.font-bold-500 {
  font-weight: 500 !important;

}

.font-bold-600 {
  font-weight: 600 !important;

}

// 行高
.lineheight-26 {
  line-height: 26px;
}

// btn

.morebtn {
  max-width: 175px;
  max-height: 40px;
  font-size: 14px;
}

// float
.float-l {
  float: left;
}

.float-r {
  float: right;
}

// 弹窗
.dialogbox {
  max-width: 800px;
  min-width: 300px;
}

// 分割线
.divider {
  width: 100%;
  height: .0625rem;
  background-color: #E0E3EB;
  // border-bottom: .0625rem sold #E0E3EB;
}

// 边框
.border-bottom {
  border-bottom: 1px solid #E0E3EB;
}

.border-none {
  border: 0;
}

//圆角
.border_5 {
  border-radius: 5px !important;
}

.border_10 {
  border-radius: 10px !important;
}

.border_14 {
  border-radius: 14px !important;
}

.border_15 {
  border-radius: 15px !important;
}

.borderbox {
  box-sizing: border-box !important;
}

.word-wrap {
  word-wrap: break-word;
}

// 文字缺省
.text-hidden-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
}

.text-hidden-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.text-hidden-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.margin-center {
  margin: 0 auto;
}

.hidden {
  overflow: hidden;
}

.boxshadow {
  box-shadow: 0 4px 4px #ccc;
}

.cursor {
  cursor: pointer;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .3125rem;
  height: 2.5rem;
  padding: auto 1.25rem;
  box-sizing: border-box;
  cursor: pointer;
  // width: 100%;
  // flex: 1 1 auto;

  &.norma {
    border: 1px solid #ccc;
    color: #3B6089;
    background-color: #fff;
  }

  &.submit {
    background: linear-gradient(90deg, rgba(0, 108, 255), rgba(166, 172, 255));
    color: #fff;
  }

  &.send {
    background: #E2EDFF;
    border: .0625rem solid #E7EAED;
    color: #146CFF;
    height: 1.875rem;
  }

  &.blue-line {
    color: #0066FF;
    border: .0625rem solid #4D91FF;
  }
}

.selectbox {
  background-color: #fff;
  padding: .625rem;
  width: 100%;
  min-height: 1.25rem;
  border-radius: .4375rem;
  box-sizing: border-box;
}

.contentbox {
  background-color: #fff;
  // padding: 1.25rem;
  // min-height: 1.25rem;
  border-radius: .4375rem;
  box-sizing: border-box;
}

.italic-text {
  -webkit-transform: skew(-10deg);
  /* for Chrome||Safari */
  -ms-transform: skew(-10deg);
  /* for IE */
  -moz-transform: skew(-10deg);
  /* for Firefox */
  -o-transform: skew(-10deg);
  /* for Opera */
}

// .icon-tips {
//   width: .8125rem;
//   height: .8125rem;
//   background-image: url('../images/icon-tips.png');
//   background-size: cover;
//   background-repeat: no-repeat;
// }

// .icon-detail-tips {
//   width: .8125rem;
//   height: .8125rem;
//   background-image: url('../images/icon-detail-tips.png');
//   background-size: cover;
//   background-repeat: no-repeat;
// }

.detailtipsbox {
  line-height: 1.5rem;
  background: linear-gradient(180deg, rgba(212, 234, 255, 0.45), rgba(255, 255, 255));
  box-shadow: 0px -2px 0px 0px #FFFFFF;
}